<template>
  <view>
    <u-popup
      :show="show"
      closeable
      mode="bottom"
      close-on-click-overlay
      round="10"
      bg-color="#f0f0f0"
      @close="closeCoupon"
    >
      <u-text text="优惠券" align="center" line-height="80rpx" />
      <scroll-view scroll-y style="height: 60vh">
        <template v-if="list.length && list[couponIndex].coupon.length">
          <view
            v-for="(coupon, index) in list[couponIndex].coupon"
            :key="index"
            :class="coupon.type"
            class="coupon-item"
          >
            <view v-if="coupon.state" class="coupon-sign">
              <u-image
                show-loading
                :src="require('@/static/my/receive.png')"
                width="114rpx"
                height="114rpx"
              />
            </view>
            <view class="item-left">
              <block
                v-if="
                  coupon.type == 'reduction' ||
                  (coupon.type == 'vip' && coupon.usertype == 'reduction')
                "
              >
                <view class="colour" :style="{ color: '#ff4f00' }">
                  <text class="text-price"></text>
                  <text class="price">{{ Number(coupon.price) }}</text>
                </view>
                <view class="cu-tag">
                  满{{ Number(coupon.limit) || 0 }}减{{ Number(coupon.price) || 0 }}
                </view>
              </block>
              <block
                v-if="
                  coupon.type == 'discount' ||
                  (coupon.type == 'vip' && coupon.usertype == 'discount')
                "
              >
                <view class="colour" :style="{ color: '#ff4f00' }">
                  <text class="price">{{ Number(coupon.discount) || 0 }}</text>
                  <text class="discount">折</text>
                </view>
                <view class="cu-tag">
                  满{{ Number(coupon.limit) || 0 }}打{{ Number(coupon.discount) || 0 }}折
                </view>
              </block>
              <block v-if="coupon.type == 'shipping'">
                <view class="colour" :style="{ color: '#ff4f00' }">
                  <text class="price">包邮</text>
                </view>
                <view class="cu-tag"> 满{{ Number(coupon.limit) || 0 }}元包邮 </view>
              </block>
            </view>
            <view class="item-right">
              <view class="title">
                <view
                  class="cu-tag tagstyle"
                  :style="{
                    backgroundColor: '#fff0e6',
                    color: '#ff4f00',
                  }"
                >
                  {{ coupon.type_text }}
                </view>
                <text class="text-cut">{{ coupon.name || "-" }}</text>
              </view>
              <view class="text-content">
                <view class="text-gray">
                  <!-- <view v-if="coupon.grant != '-1'">
                    <view class="dot"></view>目前仅剩余 {{ coupon.surplus || 0 }} 张
                  </view> -->
                  <!-- <view v-if="coupon.drawlimit != 0">
                    <view class="dot"></view>每人仅限领取 {{ coupon.drawlimit || 0 }} 张
                  </view> -->
                  <block v-if="coupon.pretype == 'fixed'">
                    <view>
                      <view class="dot"></view>生效 {{ coupon.startdate || "-" }}
                    </view>
                    <view>
                      <view class="dot"></view>结束 {{ coupon.enddate || "-" }}
                    </view>
                  </block>
                  <block v-if="coupon.pretype == 'appoint'">
                    <view v-if="coupon.validity == 0">
                      <view class="dot"></view>未使用前 永久 有效
                    </view>
                    <view v-else>
                      <view class="dot"></view>领取后 {{ coupon.validity || "-" }} 天有效
                    </view>
                  </block>
                </view>
                <view
                  class="cu-btn"
                  :style="{
                    color: '#ff4f00',
                    border: '1rpx solid #ff4f00',
                    backgroundColor: '#fff',
                  }"
                  @click.stop="onApply(index)"
                  v-if="coupon.state"
                >
                  <text v-if="coupon.choice"> 已选择 </text>
                  <text v-else> 立即使用 </text>
                </view>
                <view
                  v-else
                  class="cu-btn"
                  :style="{
                    color: '#fff',
                    border: '1rpx solid #ff4f00',
                    backgroundColor: '#ff4f00',
                  }"
                  @click.stop="onReceive(index)"
                >
                  立即领取
                </view>
              </view>
            </view>
          </view>
        </template>
        <u-empty
          v-else
          :icon="webSrc('/assets/web_img/empty.png')"
          width="162"
          height="162"
          text="暂无优惠券"
          textColor="#bababa"
        />
      </scroll-view>
      <view class="add-btn">
        <u-button
          type="primary"
          shape="circle"
          color="#3BA199"
          text="完成"
          :throttle-time="1000"
          @click="closeCoupon"
        />
      </view>
    </u-popup>
  </view>
</template>
<script>
import { myCouponReceive } from "@/request/myApi.js";
export default {
  model: {
    prop: "value",
    event: "close",
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    couponIndex: {
      type: Number,
      default: -1,
    },
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  computed: {
    show: {
      get() {
        return this.value;
      },
      set() {
        this.$emit("close", false);
      },
    },
  },
  methods: {
    // 关闭弹窗
    closeCoupon() {
      this.show = false;
    },
    // 领取优惠券
    onReceive(index) {
      let coupon = this.list[this.couponIndex].coupon[index];
      myCouponReceive({
        id: coupon.id,
      }).then((res) => {
        if (res.code == 1) {
          coupon.id = res.data.id;
          coupon.state = true;
          uni.showToast({
            title: res.data.msg,
            icon: "none",
          });
        }
      });
    },
    // 立即使用
    onApply(index) {
      // 选中优惠券, 将优惠券放进数组中
      let order = this.list[this.couponIndex];
      let data = this.list[this.couponIndex].coupon;
      data[index].choice = !data[index].choice;
      let couponData = {};
      if (data[index].choice) {
        for (var i = 0; i < data.length; i++) {
          if (i != index) {
            data[i].choice = false;
          }
        }
        // 更新选择
        couponData = data[index];
        // 满减计算
        if (
          data[index].type == "reduction" ||
          (data[index].type == "vip" && data[index].usertype == "reduction")
        ) {
          order.freight.price = order.freight_price_bak;
          order.sub_price = this.$bcsub(
            this.$bcadd(order.order_price, order.freight.price),
            data[index].price
          );
          if (order.sub_price < 0) {
            order.sub_price = 0.01;
          }
        }
        // 折扣计算  前端出问题
        if (
          data[index].type == "discount" ||
          (data[index].type == "vip" && data[index].usertype == "discount")
        ) {
          let discount =
            data[index].discount > 10
              ? this.$bcdiv(data[index].discount, 100)
              : this.$bcdiv(data[index].discount, 10);
          order.freight.price = order.freight_price_bak;
          order.sub_price = this.$bcadd(
            this.$bcmul(order.order_price, discount),
            order.freight.price
          );
        }
        // 包邮计算
        if (data[index].type == "shipping") {
          order.freight.price = 0;
          order.sub_price = order.order_price;
        }
      } else {
        // 恢复原价
        couponData = {};
        if (data[index].type == "shipping") {
          order.freight.price = order.freight_price_bak;
        }
        order.sub_price = this.$bcadd(order.order_price, order.freight.price);
      }
      // 精度计算合计
      let count = 0;
      for (var i = 0; i < this.list.length; i++) {
        count = this.$bcadd(count, this.list[i].sub_price);
      }
      this.$emit("confirm", {
        data: order,
        allsub: count,
        index: this.couponIndex,
        couponData: couponData,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.coupon-item {
  height: 218rpx;
  position: relative;
  overflow: hidden;
  display: flex;
  background-image: url("@/static/my/bg_coupon.png");
  background-size: 100% 100%;
  margin: 20rpx;
  .item-left {
    width: 226rpx;
    height: 218rpx;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex-shrink: 0;
    .colour {
      .text-price::before {
        content: "¥";
        font-size: 80%;
        margin-right: 4rpx;
      }
      .price {
        font-size: 54rpx;
        font-weight: bold;
      }
    }
  }
  .item-right {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    height: 218rpx;
    padding: 26rpx;
    z-index: 2;
    overflow: hidden;
    align-content: space-between;
    box-sizing: border-box;
    .shop {
      display: flex;
      width: 100%;
      justify-content: space-between;
      .name {
        flex: 1;
      }
    }
    .title {
      display: flex;
      align-items: center;
      width: 100%;
      .tagstyle {
        font-size: 20rpx;
        padding: 0 12rpx;
        height: 32rpx;
        margin-right: 10rpx;
      }
      .text-cut {
        color: #828282;
        font-size: 24rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .text-content {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      font-size: 24rpx;
      width: 100%;
      .text-gray {
        color: #828282;
        .dot {
          width: 12rpx;
          height: 12rpx;
          border-radius: 50%;
          background-color: #828282;
          margin-right: 4rpx;
          display: inline-block;
        }
      }
      .cu-btn {
        padding: 0 26rpx;
        font-size: 24rpx;
        height: 62rpx;
        border-radius: 1000rpx;
        position: relative;
        border: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        line-height: 1;
        text-align: center;
        text-decoration: none;
        overflow: visible;
        margin-left: initial;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        margin-right: initial;
      }
    }
  }
  .cu-tag {
    margin-top: 8rpx;
    color: #666666;
    font-size: 26rpx;
    vertical-align: middle;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0 16rpx;
    height: 48rpx;
    font-family: Helvetica Neue, Helvetica, sans-serif;
    white-space: nowrap;
    background-color: #f1f1f1;
    border-radius: 6rpx;
  }
  .coupon-sign {
    width: 114rpx;
    height: 114rpx;
    position: absolute;
    z-index: 99;
    top: -30rpx;
    right: 30rpx;
  }
}
</style>
